<template>
  <div class="header d-flex jc-between ai-center">
    <div class="d-flex jc-between ai-center">
      <div class="mr-10">
        <img
          :src="rowData.avatar"
          alt=""
          style="width: 40px; height: 40px; border-radius: 50%"
        />
      </div>
      <div>
        <div>
          <div class="d-flex ai-center">
            <span style="margin-right: 10px">
              {{ rowData.userName }}
            </span>
            <img :src="rowData.vipLevel" alt="" v-if="rowData.level" />
          </div>
          <div class="mt-5 fs-14" style="color: #7e7e7e">
            {{ rowData.title }}
          </div>
        </div>
      </div>
    </div>
    <div>
      <ft-icon
        @click="close"
        name="el-icon CloseBold"
        size="24"
        color="#959595"
      ></ft-icon>
    </div>
  </div>
  <div class="content">
    <div class="content_top mt-20">
      <span style="color: #F56D1C;margin-right: 10px;">
          充电单号：{{rowData.charge_order}}
      </span>
      <span v-if="rowData.state == 1" style="margin-right: 10px;font-size: 14px;color: #FFF;background-color: #03BF8F;padding: 2px 8px;">
          充电中
      </span>
    </div>
    <div class="mt-20 d-flex ai-center jc-between">
      <div class="content_item">
        <div>
          <span style="color: #7e7e7e;">用户账号：</span>
          <span>{{ rowData.userNumber }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">用户昵称：</span>
          <span>{{ rowData.userName }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">充电车辆：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">归属机构：</span>
          <span>{{ rowData.company }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">充电方式：</span>
          <span v-if="rowData.charge_type == '101'">蜂潮智行平台用户</span>
          <span v-if="rowData.charge_type == '102'">蜂潮智行企业用户（机构）</span>
          <span v-if="rowData.charge_type == '103'">微信小程序</span>
          <span v-if="rowData.charge_type == '104'">支付宝</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">订单类型：</span>
          <span>{{ rowData.orderType }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">交易类型：</span>
          <span v-if="rowData.payType == 0">余额</span>
          <span v-if="rowData.payType == 1">余额+R值</span>
          <span v-if="rowData.payType == 2">米豆</span>
          <span v-if="rowData.payType == 3">微信</span>
          <span v-if="rowData.payType == 4">支付宝</span>
        </div>
      </div>
      <div class="content_item">
        <div>
          <span style="color: #7e7e7e;">终端名称：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">电桩品牌：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">电桩功率：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">电站名称：</span>
          <span>{{ rowData.state_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">运营商：</span>
          <span>{{ rowData.operator }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">运营商属性：</span>
          {{ rowData.operatorType == 1 ? '[自营]' : '[加盟]' }}
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e;">充电模式：</span>
          {{ rowData.chargeModel == 0 ? '单充' : '双枪并充' }}
        </div>
      </div>
    </div>
    <div class="content_detil mt-20 d-flex ai-center jc-between">
      <div class="d-flex ai-center">
        <img src="@/assets/img/charge/detil1.png" style="width: 23px;height: 26px;" alt="">
        <div style="color: #7e7e7e;" class="ml-10">电量：</div>
        <div>{{ rowData.charge_dian }} 度</div>
      </div>
      <div class="d-flex ai-center">
        <img src="@/assets/img/charge/detil2.png" style="width: 15px;height: 26px;" alt="">
        <div style="color: #7e7e7e;" class="ml-10">SOC：</div>
        <div>{{ rowData.soc }} %</div>
      </div>
      <div class="d-flex ai-center">
        <img src="@/assets/img/charge/detil3.png" style="width: 21px;height: 26px;" alt="">
        <div style="color: #7e7e7e;" class="ml-10">时长：</div>
        <div>{{ rowData.charge_times }} 分钟</div>
      </div>
      <div>
        开始时间：{{ rowData.time }}
      </div>

    </div>
    <div class="content_table mt-20 d-flex ai-center jc-between">
      <div>
        历史监测数据列表
      </div>
      <div class="d-flex">
            <div
              class="filter_item"
              :class="filter == 1 ? 'filter_item_yes' : 'filter_item_no'"
              @click="chooseFilter(1)"
              style="border-radius: 4px 0px 0px 4px"
            >
              图表
            </div>
            <div
              class="filter_item"
              :class="filter == 2 ? 'filter_item_yes' : 'filter_item_no'"
              @click="chooseFilter(2)"
              style="border-radius: 0px 4px 4px 0px"
            >
              列表
            </div>
      </div>
    </div>
    <div class="content_echarts mt-20" v-if="filter == 1">
      <nowOrderEcharts ref="chartRef"></nowOrderEcharts>
    </div>
    <div class="content_table mt-20" v-if="filter == 2">
      <nowOrderTabel ref="tableRef"></nowOrderTabel>
    </div>

  </div>
</template>
<script setup>
import  nowOrderEcharts  from "./nowOrderEcharts.vue"
import  nowOrderTabel  from "./nowOrderTabel.vue"
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();

const rowData = ref({});
const getRowData = (params) => {
  rowData.value = params;
  proxy.$refs.chartRef.getData(rowData.value);
};
const close = () => {
  emits("close");
};
const filter = ref(1);
const chooseFilter = (val) => {
  filter.value = val;
  if(filter.value == 1){
    setTimeout(() => {
      proxy.$refs.chartRef.getData(rowData.value);
    }, 100);
  }else{
    setTimeout(() => {
      proxy.$refs.tableRef.getData(rowData.value);
    }, 100);
  }
};

defineExpose({
  getRowData,
  close,
});
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 2px solid #f04142;
}
.content {
  height: 90%;
  border: 1px solid blue;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 8px;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background: #cdcbcb;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
  &_top{
    background-color: #FAFAFA;
    padding: 20px;
  }
  &_item{
    width: 45%;
    background-color: #FAFAFA;
    padding: 20px;
  }
  &_detil{
    background-color: #FAFAFA;
    padding: 20px;
  }
}
.filter_item {
  cursor: pointer;
  height: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  width: 45px;
  &_no {
    border: 1px solid #cdcbcb;
    color: $main-color;
  }
  &_yes {
    border: 1px solid var(--el-color-primary);
    color: #fff;
    background-color: var(--el-color-primary);
  }
}
</style>
